<template>
	<div>
		<breadcrumb></breadcrumb>
		<div class="header">
			<div class="inputItem">
				<div class="title">供应商名称</div>
				<div class="inputBox">
					<el-input v-model="supplierName" @keyup.enter.native="initList1()">
					</el-input>
				</div>
			</div>

			<!-- 查询 -->
			<div class="Btn_grounp">
				<el-button class="searchBtn" type="primary" size="small" icon="el-icon-search"
					@click="initList1">查询</el-button>
				<el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right"
					@click="CleanUp">清空</el-button>
			</div>
		</div>

		<div class="main">
			<div class="list">
				<el-table :data="records" style="width: 100%" :header-row-style="{ height: '48px' }"
					:row-style="{ height: '48px' }" ref="table">
					<el-table-column align="left" prop="SerialNumber" label="序号">
					</el-table-column>
					<el-table-column align="left" prop="supplierName" label="企业全称">
					</el-table-column>
					<el-table-column align="left" prop="supplierAbbreviation" label="企业简称">
					</el-table-column>
					<el-table-column align="left" prop="location" label="所属地区">
					</el-table-column>
					<el-table-column align="left" prop="headName" label="负责人">
					</el-table-column>
					<el-table-column align="left" prop="headTel" label="负责人电话">
					</el-table-column>
					<el-table-column align="left" prop="certStatus" label="供应商状态">
						<template slot-scope="scope">
							<div class="tag" v-if="scope.row.certStatus.value == 0">
								<div class="dian"></div>
								<div class="text">待认证</div>
							</div>
							<div class="tag" v-else-if="scope.row.certStatus.value == 1">
								<div class="dian"></div>
								<div class="text">认证中</div>
							</div>
							<div class="tag NoPass" v-else-if="scope.row.certStatus.value == 3">
								<div class="dian NoPass"></div>
								<div class="text">不通过</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="left" prop="createTime" label="创建时间" sortable>
					</el-table-column>

					<el-table-column align="left" label="操作">
						<template slot-scope="scope">
							<div>
								<el-button type="text" size="small" v-if="permissions.getDetails.perms!=null" @click="
                    $router.push(
                      '/supplierManagement/certifiedSupplier/details/' +
                        scope.row.supplierId
                    )
                  ">详情</el-button>
								<el-button type="text" size="small"
									v-if="scope.row.certStatus.value != 3 & permissions.cert_audit.perms!=null"
									@click="showAuditDialog(scope.row.supplierId)">认证</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="paginationBox">
				<el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
					:page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
					<template slot>
						<span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
					</template>
				</el-pagination>
			</div>
		</div>

		<el-dialog class="dialog" title="认证" :visible.sync="visibleDialogBox" width="420px">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
				<el-form-item label="认证结果" prop="certStatus">
					<el-radio-group v-model="ruleForm.certStatus">
						<el-radio :label="'2'">是</el-radio>
						<el-radio :label="'3'">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="认证说明" prop="auditFailReason" v-if="ruleForm.certStatus == 3">
					<el-input type="textarea" resize="none" :rows="3" placeholder="请输入内容"
						v-model="ruleForm.auditFailReason"></el-input>
				</el-form-item>
			</el-form>
			<div style="display: flex; justify-content: flex-end">
				<el-button class="cancelBtn" @click="visibleDialogBox = false">取 消</el-button>
				<el-button class="submitBtn" type="primary" @click="SubmitAudit(ruleForm.certStatus)">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import breadcrumb from "@/components/breadcrumb.vue";
	import httpApi from "@/http";
	export default {
		data() {
			return {
				supplierName: "",
				visibleDialogBox: false,
				records: [],
				data: {},
				pageCurrent: "1",
				size: "10",
				supplierId: "",
				ruleForm: {
					certStatus: "2",
					auditFailReason: "",
				},
				permissions: {},
				rules: {
					certStatus: [{
						required: true,
						message: "请选择",
						trigger: "change"
					}],
					auditFailReason: [{
						max: 200,
						message: "最大长度200 个字符",
						trigger: "blur"
					}, ],
				},
			};
		},
		created() {
			this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
		},
		methods: {
			/* getSerialNumber() {
			        // 前端解决序号
			        this.records.forEach((item, i) => {
			            let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
			            item.SerialNumber = num < 10 ? "0" + num : num;
			        });
			    }, */
			getSerialNumber() {
				// 前端解决序号
				this.records.forEach((item, i) => {
					let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
					item.SerialNumber = num;
				});
			},
			showAuditDialog(supplierId) {
				this.visibleDialogBox = true;
				this.supplierId = supplierId;
			},
			initList1(){
				this.pageCurrent=1;
				this.initList();
			},
			initList() {
				// 待认证供应商查询接口 不为模糊搜索 需修改接口
				let params = {
					size: this.size,
					current: this.pageCurrent,
					supplierName: this.supplierName,
				};
				// console.log(params);
				httpApi.supplierManagementApi
					.getAuditSupplierManagementList(params)
					.then((res) => {
						// console.log('待认证供应商res', res);
						this.records = res.data.data.records;
						this.getSerialNumber();
						// console.log('待认证供应商records', this.records);
						this.data = res.data.data;
						// console.log('待认证供应商data', this.data);
					});
			},
			changePages(val) {
				this.pageCurrent = val;
				this.initList();
			},
			CleanUp() {
				this.supplierName = "";
				this.pageCurrent=1;
				this.initList();
			},
			SubmitAudit(params) {
				// 2表示通过  3不通过
				this.showMessageBox = true;
				if (params == "2") {
					let params = {
						certStatus: "2",
						supplierId: this.supplierId
					};
					// console.log('params', params);
					httpApi.supplierManagementApi.examineSupplier(params).then((res) => {
						// console.log('通过结果', res);
						// console.log('响应状态码', res.data.code);
						this.visibleDialogBox = false;
						if (res.data.code == 200) {
							this.initList();
							this.$message({
								type: "success",
								message: `认证通过! (后台:${res.data.msg})`,
							});
						}
					});
				} else if (params == "3") {
					let params = {
						certStatus: "3",
						auditFailReason: this.ruleForm.reauditFailReason,
						supplierId: this.supplierId,
					};
					// console.log('params', params);
					httpApi.supplierManagementApi.examineSupplier(params).then((res) => {
						// console.log('不通过结果', res);

						if (res.data.code == 200) {
							this.initList();
							this.$message({
								type: "error",
								message: `不通过认证! (后台:${res.data.msg})`,
							});
							this.visibleDialogBox = false;
						}
					});
				}
			},
			// 记录滚动距离
			scrollEvent(res) {
				this.$route.meta.scrollTop = res.target.scrollTop
			},
		},
		mounted() {
			this.initList();
		},
		// 记录滚动距离
		scrollEvent(res) {
			this.$route.meta.scrollTop = res.target.scrollTop
		},
		activated() {
			//组件激活时监听表格滚动条位置,
			this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
			// 激活设置滚动位置
			this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
		},
		beforeRouteLeave(to, from, next) {
			// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
			this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
			next()
		},


		components: {
			breadcrumb,
		},
	};
</script>

<style lang="scss" scoped>
	.header {
		height: 76px;
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 29px;
		margin-bottom: 8px;

		.Btn_grounp {
			display: flex;
			margin-left: 16px;

			.searchBtn {
				width: 80px;
				height: 32px;
				color: #fff;
				font-size: 12px;
			}

			.clearBtn {
				width: 80px;
				height: 32px;
				color: #262626;
				font-size: 12px;
			}
		}

		.inputItem {
			display: flex;
			align-items: center;
			margin-right: 23px;

			>.title {
				color: #262626;
				font-size: 12px;
				margin-right: 7px;
			}

			>.inputBox {
				width: 160px;

				.select {
					::v-deep .el-input__icon {
						line-height: 0;
					}
				}

				::v-deep .el-input__inner {
					height: 32px;
					font-size: 12px;
				}

				::v-deep .el-input__inner::placeholder {
					color: #c3c3c3;
					font-size: 12px;
				}
			}
		}
	}

	.main {
		width: 100%;
		height: calc(100vh - 211px);
		background-color: #fff;
		padding: 24px 0 0 0;

		.list {
			height: calc(100% - 48px);
			width: 100%;
			padding: 0 30px;

			.tag {
				width: 63px;
				height: 28px;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 4px;
				background-color: #ecf5fe;
				color: #1890ff;

				&.NoPass {
					color: #f7555d;
					background-color: #fde8e9;
				}

				.dian {
					width: 4px;
					height: 4px;
					border-radius: 50%;
					margin-right: 4px;
					background-color: #1890ff;

					&.NoPass {
						background-color: #f7555d;
					}
				}
			}

			::v-deep .el-table__body-wrapper {
				height: calc(100vh - 330px);
				overflow-y: scroll;
			}

			// 表头样式
			::v-deep .el-table__header th {
				background-color: #f0f6fd;
				color: #262626;
				font-size: 12px;
				height: 48px;
				font-weight: bold;
				text-align: left;
				padding: 0;

				// 表 body的td
				::v-deep .el-table__body td {
					color: #595959;
					font-size: 12px;
					height: 48px;
				}
			}

			.stateBtns {
				height: 30px;
				width: 76px;

				::v-deep .el-button {
					height: 30px;
					width: 76px;
					font-size: 12px;
					border: none;
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 30px;
				}

				.waitPass {
					background-color: #ecf5fe;
					color: #1890ff;
				}

				.noPass {
					background-color: #fde8e9;
					color: #f7555d;
				}
			}
		}

		.paginationBox {
			border-top: 1px solid #f0f0f0;
			width: 100%;
			background-color: #fff;
			display: flex;
			height: 48px;
			padding: 0 30px;

			align-items: center;

			.pagination {
				margin-left: auto;
			}
		}
	}

	.dialog {
		::v-deep .el-dialog__header {
			border-bottom: 1px solid #f0f0f0;
			padding: 15px 20px;
			color: #262626;
			font-size: 14px;
			font-weight: bold;
			height: 50px;
		}

		::v-deep .el-dialog__title {
			font-size: 14px;
			color: #303133;
			font-weight: bold;
		}

		//关闭图标
		::v-deep .el-dialog__headerbtn .el-dialog__close {
			font-size: 15px;
		}

		::v-deep .el-dialog__body {
			padding: 20px;
		}
	}
</style>